// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Radio, Button,Popconfirm, Modal, Row, Col, Input, Select, Cascader, Icon, Checkbox, Tabs, DatePicker, message } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './talkCollegeAddStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import moment from 'moment';
import Uploader from 'widget/Upload'

const FormItem = Form.Item
const { RangePicker } = DatePicker
const { TextArea } = Input
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const talkCollegeAddView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let { moudleName,nameModalObj,localGif,moudleList,query, actionType, btnLoading } = modelObj

  const formItemLayoutPro = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  const formItemLayout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 8 },
  };


  function goback(){
    hashHistory.push({
      pathname: '/home/expandManage/talkCollege',
      query: {}
    });
  }
  //上传图片
  function updateImageModel(value, type) {
    if (type == 'gifimg') {
        localGif = value,
            query.gifimg = value
    } else if (type == 'img') {
        query.slideUrl = value
    }
    dispatch({
        type: `${namespace}/updateStore`,
        payload: { query, localGif }
    });
  };
  //删除上传的图片
  function removeImgUrl(type) {
      if (type == 'gifimg') {
          localGif = '',
              query.gifimg = ''
      } else if (type == 'img') {
          query.slideUrl = ''
      }
      dispatch({
          type: `${namespace}/updateStore`,
          payload: { query, localGif }
      });
  }
  //上传文件
  function updateFileModel(value,fileObj) {
    query.url[0]={
        url:value,
        name:fileObj.name,
    };
    dispatch({
        type: `${namespace}/updateStore`,
        payload: { query }
    })
  };
  // 删除文件
  function removeFileUrl(index){
    query.url.splice(index, 1)
    dispatch({
        type: `${namespace}/updateStore`,
        payload: { query }
    })
  }

  
  function submit(){
    dispatch({
      type: `${namespace}/editContent`,
      payload: {}
  });
  }

   // 弹出搜索中介名称弹窗
  function onSearchDialog(){
    form.resetFields()
    nameModalObj.visible = !nameModalObj.visible
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {nameModalObj}
    })
  }
  function confirmSearchDialog(){
    dispatch({
      type: `${namespace}/addOrUpdateStudyMoudle`,
      payload: {}
    })
    onSearchDialog()
  }
  //输入框改变时
  function inputChange(e, name) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {
        query: {
          ...query,
          [name]: e,
        }
      }
    })
  }
  function textChange(value, name){
    moudleName = value
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {moudleName}
    })
  }

  return (
    <div className='public_listMain'>
      <div className={"functionButton"}>
        <Button type='primary' onClick={e => submit()} loading={btnLoading}>保存</Button>
        <Popconfirm placement="top" title={"是否确认关闭，确认后关闭页面，不保存数据。"} onConfirm={() => goback()} okText="确定" cancelText="取消">
          <Button>关闭</Button>
        </Popconfirm>
      </div>

      <CollapsiblePanels title="资料设置" hideUpDownBtn={true} >
      <Row>
          <Col span={16}>
            <FormItem label='使用系统'  {...formItemLayoutPro}>
              {getFieldDecorator('tableType', {
                rules: [{
                  required: false, whitespace: true, message: '请选择使用系统'
                }],
                initialValue: query.tableType
              })(
                <Radio.Group name="tableType" disabled={actionType == 'check'} onChange={(e) => { inputChange(e.target.value, 'tableType') }}>
                    <Radio value="0">智行销</Radio>
                    <Radio value='1'>慧客通</Radio>
                </Radio.Group>
              )}
            </FormItem>
          </Col>
        </Row>
      <Row>
          <Col span={16}>
            <FormItem label='是否设置轮播图资料'  {...formItemLayoutPro}>
              {getFieldDecorator('ifSlideShow', {
                rules: [{
                  required: false, whitespace: true, message: '请选择是否轮播'
                }],
                initialValue: query.ifSlideShow
              })(
                <Radio.Group name="ifSlideShow" disabled={actionType == 'check'} onChange={(e) => { inputChange(e.target.value, 'ifSlideShow') }}>
                    <Radio value="Y">是</Radio>
                    <Radio value='N'>否</Radio>
                </Radio.Group>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row style={{display: query.ifSlideShow=='Y'?'block':'none'}}>
        <Col span={4}></Col>
        <FormItem 
            {...formItemLayoutPro}
            extra="图片分辨率需为1372px*736px，且文件大小在200kb以下，支持jpg，png格式"
            // label=" "
            // required='true'
            >
            <Uploader uploadedUrls={query.slideUrl}
                removeFileCbf={() => { removeImgUrl('img') }}
                uploadSuccessCbf={(slideUrl) => { updateImageModel(slideUrl, 'img') }}
                showType={actionType == 'detail'?'4':'6'}
                minCropBoxWidth={1372}
                minCropBoxHeight={736}
                unsetWidth={true}
                fileType='image'
                fileMaxSize='0.2'
                maxFiles='1'
                disabled={actionType == 'check'}
            />
        </FormItem>
        </Row>
        <Row>
          <Col span={16} style={{position: 'relative'}}>
            <FormItem label='学堂模块'  {...formItemLayoutPro}>
              {getFieldDecorator('moudle', {
                rules: [{
                  required: true, whitespace: true, message: '请选择学堂模块'
                }],
                initialValue: query.moudle
              })(
                <Select disabled={actionType == 'check'} placeholder='请选择学堂模块' onChange={(e) => { inputChange(e, 'moudle') }}>
                  {moudleList.map((item)=>{
                      return <Select.Option key={item.value} value={item.label}>{item.label}</Select.Option>
                    })}
                </Select>
              )}
            </FormItem>
            {/* <Button disabled={actionType == 'check'} style={{position: "absolute",right:'3%',top: '4px', cursor: "pointer",zIndex: 99}} type='primary' onClick={() => { onSearchDialog() }}>编辑学堂模块</Button> */}
          </Col>
        </Row>
        <Row>
          <Col span={16}>
            <FormItem label='资料类型'  {...formItemLayoutPro}>
              {getFieldDecorator('type', {
                rules: [{
                  required: true, whitespace: true, message: '请选择资料类型'
                }],
                initialValue: query.type
              })(
                <Select disabled={actionType == 'check'} placeholder='请选择资料类型' onChange={(e) => { inputChange(e, 'type') }}>
                  <Select.Option value="Work">Work</Select.Option>
                  <Select.Option value="PPT">PPT</Select.Option>
                  <Select.Option value="Excel">Excel</Select.Option>
                  <Select.Option value="PDF">PDF</Select.Option>
                  <Select.Option value="视频">视频</Select.Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={16}>
            <FormItem label='标题'  {...formItemLayoutPro}>
              {getFieldDecorator('title', {
                rules: [{
                  required: true, whitespace: true, message: '请输入标题名称'
                }],
                initialValue: query.title
              })(
                <Input disabled={actionType == 'check'} placeholder='请输入标题名称' onChange={(e) => { inputChange(e.target.value, 'title') }} />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={16}>
            <FormItem
                {...formItemLayoutPro}
                // extra="资料文件大小在500MB以下，支持word、ppt、excel、pdf、MP4格式"
                label="上传资料"
                required='true'
                >
                <Uploader uploadedUrls={query.url}
                    removeFileCbf={(index) => { removeFileUrl(index) }}
                    uploadSuccessCbf={(imgUrl,fileObj) => { updateFileModel(imgUrl, fileObj) }}
                    showType='5'
                    maxFiles='50'
                    fileType='file'
                    accept={'.xlsx,.xls,.doc,.docx,.pdf,.txt,.mp4,.ppt,.pptx'}
                    uploadTip='资料文件大小在500MB以下，支持word、ppt、excel、pdf、MP4格式'
                    disabled={actionType == 'check'}
                />
            </FormItem>
          </Col>
        </Row>
      </CollapsiblePanels>
      <Modal
        title={'学堂模块详情'}
        width='600px'
        visible={nameModalObj.visible}
        onCancel={() => { onSearchDialog() }}
        onOk={() => { confirmSearchDialog() }}
       
      >
        <div>
        <Row>
          <Col span={4}>
            <span>学堂模块 ：</span>
          </Col>
          <Col span={14}>
            <TextArea placeholder='请输入学堂模块' onChange={(e) => { textChange(e.target.value, 'moudleName') }} />
          </Col>
        </Row>
        <div style={{fontSize: '12px',color: 'red',margin: '12px 0'}}>
          注 : 填写学堂模块，用 ";" 分开
        </div>
        </div>
      </Modal>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(talkCollegeAddView))